<template>
     <div>
    <h3>会员列表页面</h3>
    <input type="button" value="增加" class="btn btn-primary" @click="add" />
    会员编号:<input type="text" v-model="queryInfo.id "/>会员名称:<input type="text" v-model="queryInfo.name">
    会员等级:<select v-model="queryInfo.levelId">
      <option value="">请选择</option>
   
    </select>
    <table class="table table-bordered">
      <tbody>
        <tr class="bg-primary">
          <td>Id</td>
          <td>会员名称</td>
          <td>手机号</td>
          <td>身份证</td>
          <td>会员等级</td>
          <td>生日</td>
          <td>余额</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in list" :key="item.Id">
          <td>{{ item.Id }}</td>
          <td>{{ item.Name }}</td>
          <td>{{ item.Phone }}</td>
          <td>{{ item.Card }}</td>
          <td>
            <span v-if="item.LevelId==1">普通会员</span>
            <span v-if="item.LevelId==2">黄金会员</span>
            <span v-if="item.LevelId==3">白银会员</span>
            <span v-if="item.LevelId==4">砖石会员</span>
           </td>
          <td>{{ item.Birthday }}</td>
          <td>{{ item.Money }}</td>
          <td>
            <input type="button" value="修改" class="btn btn-success" />
            <input type="button" value="删除"  class="btn btn-danger"  />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter();
let queryInfo = reactive({
  id: '',
  name: '',
  levelId: '',
});

let list: any = ref([]);

//增加
const add = () => {
  router.push('/memberAdd');
};

onMounted(() => {
  getList();
});


//获取列表数据
const getList = () => {
  axios({
    url: '/api/Members/MemberList',
    method: 'get',
    params: queryInfo,
  })
    .then((res) => {
      console.log(res);
      list.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
